<template>
  <div class="film-config">
    <a-form ref="domainFormRef" :model="domainState" :rules="configRules" :labelCol="labelCol" class="film-config-top">
      <div class="film-config-top-tip">
        <info-circle-outlined class="film-config-top-tip-icon" />
        <span class="film-config-top-tip-title">说明：</span>
        <span class="film-config-top-tip-text">当域名失效时，可通过域名替换功能批量更新资源的域名。</span>
      </div>
      <a-form-item label="选择替换域名类型" name="replace_type" class="form-item">
        <a-select
          class="width-460"
          v-model:value="domainState.replace_type"
          placeholder="选择需替换域名类型"
          @change="typeChange"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option v-for="item in domainData" :key="item.value" :value="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="请输入需替换域名" name="before_domain" class="form-item">
        <a-input v-model:value.trim="domainState.before_domain" class="width-460" placeholder="请填写域名" />
      </a-form-item>
      <a-form-item label="请输入替换后域名" name="after_domain" class="form-item">
        <a-input v-model:value.trim="domainState.after_domain" class="width-460" placeholder="请填写域名" />
      </a-form-item>
    </a-form>
  </div>
  <div class="film-config-top-btn">
    <a-button type="primary" :disabled="isActiveBtn" @click="handleInstead">替换</a-button>
  </div>
  <!-- 域名替换 -->
  <modal-view title="域名替换" v-model:visible="domainState.domainInsteadVisible" :footer="null" :width="542">
    <div v-if="replaceStatus != 4 && replaceStatus != 5">
      <a-form class="dialog-form" :model="domainState">
        <a-form-item label="需替换的域名" name="before_domain" :colon="false">
          <div class="gray-background">{{ domainState.before_domain }}</div>
        </a-form-item>
        <a-form-item label="替换后的域名" name="after_domain" :colon="false">
          <div class="gray-background">{{ domainState.after_domain }}</div>
        </a-form-item>
      </a-form>
      <div class="check-data">
        <span v-if="replaceStatus === 2" class="mr-[32px] text-center">
          共查询到需替换的数据: <span class="count">{{ formatNumber(checkCount) }} 条</span>
        </span>
        <!-- <span v-if="replaceStatus === 3">
          已替换:<span class="count">{{ formatNumber(replaceCount) }} 条</span>
        </span> -->
      </div>
    </div>
    <div v-else-if="replaceStatus === 4" class="flex items-center">
      <check-circle-outlined class="text-[19.5px] text-[#00A870] mr-[11.25px]" />替换成功！共替换
      <span class="text-[16px]">{{ formatNumber(replaceCount) }}</span> 条数据。
    </div>
    <div v-else class="flex items-center">
      <close-circle-outlined class="text-[19.5px] text-[#E34D59] mr-[11.25px]" />
      <span class="text-[16px]">替换失败！系统繁忙，请稍后重试。</span>
    </div>
    <div class="bottom-btn">
      <a-button type="primary" v-if="replaceStatus === 1" :loading="checkingLoading" @click="checkInfo">查询</a-button>
      <a-button type="primary" v-else-if="replaceStatus === 2" @click="handleReplace">替换</a-button>
      <a-button type="primary" v-else-if="replaceStatus === 3" :loading="replacingLoading">替换中</a-button>
      <a-button type="primary" v-else-if="replaceStatus === 4" @click="domainComplete">完成</a-button>
      <a-button type="primary" v-else @click="handleReplace">重试</a-button>
      <a-button @click="domainCancel" class="m-l-16">取消</a-button>
    </div>
  </modal-view>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import ModalView from '@/components/components/modal/ModalView.vue'
import { formatNumber } from '@/utils/format'
import { domainState, configRules, domainData } from './state'
import apis from '@/apis'
const {
  system: { domain_replace }
} = apis
const checkCount = ref()
const replaceCount = ref()
const replaceStatus = ref(1)
const domainFormRef = ref()
const checkingLoading = ref(false)
const replacingLoading = ref(false)

const labelCol = { style: { width: '140px' } }
const handleInstead = () => {
  domainState.domainInsteadVisible = true
}
const isActiveBtn = computed(() => {
  if (
    (domainState.replace_type || domainState.replace_type === 0) &&
    domainState.before_domain &&
    domainState.after_domain
  )
    return false
  return true
})
//域名类型切换事件
const typeChange = (val: number) => {
  console.log('val: ', val)
}
//重置
const resetFunc = () => {
  domainFormRef.value.resetFields()
}
//完成
const domainComplete = () => {
  domainState.domainInsteadVisible = false
  replaceStatus.value = 1
  resetFunc()
  console.log('domainState: ', domainState)
}
//查询
const checkInfo = () => {
  domainFormRef.value.validate().then(() => {
    checkingLoading.value = true
    //发起查询请求
    domainState.replace_option = 1
    domain_replace({ ...domainState }).then((res: any) => {
      console.log('res: ', res)
      checkCount.value = res.total
      checkingLoading.value = false
      replaceStatus.value = 2
    })
  })
}
//替换
const handleReplace = () => {
  replacingLoading.value = true
  replaceStatus.value = 3
  domainState.replace_option = 2
  domain_replace({ ...domainState })
    .then((res: any) => {
      console.log('res: ', res)
      replaceCount.value = res.total
      checkingLoading.value = false
      replaceStatus.value = 4
      replacingLoading.value = false
    })
    .catch(() => {
      replacingLoading.value = false
      replaceStatus.value = 5
    })
}
//取消
const domainCancel = () => {
  domainState.domainInsteadVisible = false
  replaceStatus.value = 1
}
</script>

<style lang="less" scoped>
.gray-background {
  min-height: 32px;
  color: #262626;
  background: #f8f8f8;
  border-radius: 3px;
  padding: 6px 16px;
  box-sizing: border-box;
  margin-left: 16px;
}

.check-data {
  font-size: 14px;
  color: #8c8c8c;

  .count {
    color: #262626;
  }
}

.bottom-btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;

  .m-l-16 {
    margin-left: 16px;
  }
}

.film-config {
  margin-top: 24px;

  &-top {
    border-bottom: 1px solid #f0f0f0;

    &-tip {
      width: 100%;
      min-height: 48px;
      background: #fffbe4;
      border: 0.5px solid rgba(255, 169, 0, 1);
      border-radius: 3px;
      font-size: 14px;
      padding: 14px 16px;
      box-sizing: border-box;
      margin-bottom: 24px;

      &-icon {
        color: #ffa900;
      }

      &-title {
        font-size: 14px;
        color: #262626;
        font-weight: 500;
        margin-left: 8px;
      }

      &-text {
        font-size: 14px;
        color: #595959;
        font-weight: 400;
        margin-left: 8px;
      }
    }

    &-btn {
      border-top: 1px solid #e8e8e8;
      padding-top: 24px;
    }
  }

  .form-item {
    :deep(.ant-form-item-label > label::after) {
      content: '';
      margin-right: 15px;
    }

    .m-l-53 {
      margin-left: 53px;
    }

    .width-460 {
      width: 460px;
    }

    .default-btn {
      width: 60px;
      height: 28px;
      font-size: 14px;
      color: #00a870;
      background: rgba(0, 168, 112, 0.08);
      border-radius: 2px;
      padding: 3px 9px;
    }
  }
}
</style>
